<template>
  <div @click="toPlayPage" class="play_bar">
    <!-- 歌曲图片 -->
    <van-image round fit="cover" width="42px" height="42px" :src="imgUrl" />
    <!-- 歌曲信息 -->
    <div class="song_info">
      {{ song_name }} -
      <span class="song_singer">{{ singer }}</span>
    </div>
    <!-- 上一首 -->
    <i class="iconfont icon-shangyishou" @click.stop="prev_song"></i>
    <!-- 播放/暂停 -->
    <i
      @click.stop="play_song"
      class="iconfont play"
      :class="playing ? 'icon-zanting' : 'icon-shipin'"
    ></i>
    <!-- 下一首 -->
    <i class="iconfont icon-xiayishou" @click.stop="next_song"></i>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  methods: {
    // 改变播放状态
    play_song() {
      this.$audio.playStatus();
    },
    // 跳转到播放页面
    toPlayPage() {
      this.$router.push({
        name: "PlayPage",
        params: {
          id: this.song_id,
        },
      });
    },
    // 上一首
    prev_song() {
      // console.log("切换上一首");
      let new_idx;
      if (this.song_idx === 0) {
        new_idx = this.play_list.length - 1;
      } else {
        new_idx = this.song_idx - 1;
      }
      let prev_id = this.play_list[new_idx];
      // 改变当前歌曲下标
      this.$store.commit("change_idx", new_idx);
      // 拿到id后进行歌曲播放，并且更新歌曲详情
      this.$audio.playSong(prev_id);
    },
    // 下一首
    next_song() {
      // console.log("切换下一首");
      let new_idx;
      if (this.song_idx === this.play_list.length - 1) {
        new_idx = 0;
      } else {
        new_idx = this.song_idx + 1;
      }
      let next_id = this.play_list[new_idx];
      // 改变当前歌曲下标
      this.$store.commit("change_idx", new_idx);
      // 拿到id后进行歌曲播放，并且更新歌曲详情
      this.$audio.playSong(next_id);
    },
  },
  computed: {
    ...mapState([
      "song_id", // 歌曲id
      "playing", // 播放状态
      "song_name", // 歌曲name
      "imgUrl", // 歌曲图片
      "play_list", // 播放列表id
      "song_idx", // 当前歌曲下标
    ]),
    // 歌手
    ...mapGetters(["singer"]),
  },
};
</script>

<style lang="scss" scoped>
.play_bar {
  position: fixed;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background-color: rgba($color: #000000, $alpha: 0.8);
  .song_info {
    flex: 1;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: normal;
    color: #fff;
    .song_name {
      font-size: 16px;
    }
    .song_singer {
      font-size: 14px;
    }
  }
  i {
    font-size: 30px;
    line-height: 48px;
    color: #fff;
    &.play {
      font-size: 36px;
      padding: 0 6px;
    }
  }
}
</style>
